	*{
	margin: 0;
	padding: 0;
	outline: none;
	border: 0;
	 }
	 ul,ol,li{
		 list-style: none;
	 }
        div,ul,li{
            margin: 0;
            padding: 0;
        }

        .container{
			width: 711px;
			height: 400px;
            position: relative;
			margin: 150px auto;
        }

        .container img{
            position: absolute;
            width: 100%;
            transition-duration: 0.5s;
            opacity: 0;
			width: 711px;
			height: 400px;
			border-radius: 10px;
        }

        .container img.on{
            opacity: 1;
        }

        .left, .right{
            position: absolute;
            top: 30%;
            width: 60px;
            height: 100px;
            line-height: 100px;
            background-color: #666;
            opacity: 0.5;
            text-align: center;
            font-size: 60px;
            color: #ccc;
            display: none;
            cursor: pointer;
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .container:hover .left, .container:hover .right{
            display: block;
        }
        .left:hover, .right:hover{
            color: #fff;
        }

        .container ul{
            position: absolute;
            bottom: 0;
            max-width: 500px;
            padding: 5px 200px;
			margin: 0 95.5px 0;
        }
        .container ul li{
            list-style: none;
            float: left;
            background-color: #ccc;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-left: 10px;
            cursor: pointer;
        }
        .container ul li.active{
            background-color: #282923;
        }